<template>
  <div>
        <hreaders :head_title="head_title" />
        <div v-for="(item, index) in myArray_video_list" :key="index">
            <div class="collect_video">

              <video
                :src="item.originalUrl"
                autoplay
                muted
                class="fullscreen-video"
              ></video>
              <div>
                <p>{{ item.title }}</p>
                <p>视频时长:{{item.duration}}s</p>
                <p>视频购买时间:{{ item.createTime }}</p>
              </div>
            </div>
          </div>
  </div>
</template>

<script setup lang="ts">
import {useRouter} from 'vue-router'
import hreaders from  '@/components/header.vue'
import { findVideoCollectionList } from '@/api/api'
import { ref } from 'vue'
import { Loading } from 'vant'
const head_title='我的视频'
const page = ref(1)
const count = ref(5)
const userId = ref(parseInt(localStorage.getItem('userId') as string))
const sessionId = ref(JSON.parse(localStorage.getItem('sessionId') as string))

// 获取购买的视频并渲染
const myArray_video_list = ref([])
const collect_video = async () => {
  try {
    const res = await findVideoCollectionList(userId.value, sessionId.value, {
      page: page.value,
      count: count.value,
    })
    console.log('用户收视频列表', res)
    Loading.value = true //开启加载动画
    console.log(res)
    myArray_video_list.value = res.data.result
    console.log(myArray_video_list.value)
  } catch (e) {
    console.log('数据获取失败')
  }
}
collect_video()
</script>

<style scoped>
.collect_video{
  display: flex;
  margin: 5px;
}

.fullscreen-video {
  width: 70px;
  height: 100px;
}
</style>
